<template>
  <div class="main">
    <div class="left">树组件
      <el-tree
        ref="tree"
        :data="treeData"
        node-key="id"
        :props="defaultProps"
        icon-class="el-icon-d-caret"
        highlight-current
        :default-expanded-keys="['1024982867475820033','1024984540818568481']"
        current-node-key="1024985257948084801"
        @node-click="nodeClick"
      />
    </div>
    <div class="right">
      <div class="right-top">
        <el-form :disabled="!formIsEdit" :model="formData" size="small" label-width="80px" label-position="right">
          <p class="title">机构信息</p>

          <!-- 第一行 -->
          <el-row :gutter="20">
            <el-col :span="7"><div class="grid-content bg-purple">
              <el-form-item label="机构编号">
                <el-input v-model="formData.id" disabled placeholder="审批人" />
              </el-form-item>
            </div>
            </el-col>
            <el-col :span="8"><div class="grid-content bg-purple">
              <el-form-item label="机构名称">
                <el-input v-model="formData.name" disabled placeholder="审批人" />
              </el-form-item>
            </div></el-col>
            <el-col :span="9"><div class="grid-content bg-purple">
              <el-form-item label="机构类型">
                <el-input v-model="formData.name" disabled placeholder="审批人" />
              </el-form-item>
            </div></el-col>
          </el-row>

          <!-- 第二行 -->

          <el-form-item label="机构地址">
            <el-row type="flex">
              <el-input v-model="NodeAreaInfo.province.name" placeholder="审批人" />
              <el-input v-model="NodeAreaInfo.county.name" placeholder="审批人" />
              <el-input v-model="NodeAreaInfo.city.name" placeholder="审批人" />
            </el-row>
          </el-form-item>

          <!-- 第三行 -->
          <el-row :gutter="20">
            <el-col :span="7"><div class="grid-content bg-purple">
              <el-form-item label="详细地址">
                <el-input v-model="NodeAreaInfo.address" placeholder="审批人" />
              </el-form-item>
            </div>
            </el-col>
            <el-col :span="8"><div class="grid-content bg-purple">
              <el-form-item label="经度">
                <el-input v-model="formData.longitude" disabled placeholder="审批人" />
              </el-form-item>
            </div></el-col>
            <el-col :span="9"><div class="grid-content bg-purple">
              <el-form-item label="纬度">
                <el-input v-model="formData.longitude" disabled placeholder="审批人" />
              </el-form-item>
            </div></el-col>
          </el-row>

          <!-- 第四行 -->
          <el-row :gutter="20">
            <el-col :span="9"><div class="grid-content bg-purple">
              <el-form-item label="机构负责人">
                <el-input v-model="formData.managerName" placeholder="审批人" />
              </el-form-item>
            </div>
            </el-col>
            <el-col :span="8"><div class="grid-content bg-purple">
              <el-form-item label="机构电话 ">
                <el-input v-model="formData.phone" placeholder="审批人" />
              </el-form-item>
            </div></el-col>

          </el-row>

        </el-form>
        <!-- 按钮 -->
        <el-row type="flex" justify="center">
          <el-button :style="buttonStyle" @click="editBtn">{{ formIsEdit?'保存': '编辑' }}</el-button>

        </el-row>
      </div>
      <div class="right-footer">
        <p class="title">  员工信息</p>
        <div class="table">
          <template>
            <el-table
              :data="tableData"
              style="width: 100%"
            >
              <el-table-column
                prop="index"
                label="序号"
                width="180"
              />
              <el-table-column
                prop="userId"
                label="员工编号"
                width="180"
              />
              <el-table-column
                prop="name"
                label="员工姓名"
              />
              <el-table-column
                prop="mobile"
                label="手机号"
              />
              <el-table-column
                prop="agency.name"
                label="所属机构"
              />
              <el-table-column
                prop="account"
                label="系统账户"
              />
              <el-table-column
                prop="stationName"
                label="系统角色"
              />
              <el-table-column
                prop="status"
                label="账号状态"
              />
            </el-table>
          </template>

          <!-- 分页器 -->
          <el-row style="backgroundColor:white;" type="flex" justify="center">
            <el-pagination
              :current-page="currentPage"
              :page-sizes="[5, 10, 20, 40]"
              :page-size="5"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-row>
        </div>

      </div>
    </div>
  </div>
</template>

<script>
import { getEmployeePagingDataAPI, getTreeOrg } from '@/api/manageData'
export default {
  data() {
    return {
      // 分页器相关
      currentPage: 1,
      total: 5,
      pageSize: null,
      // 分页器相关
      buttonStyle: {
        backgroundColor: '#e15536',
        color: 'white'
      },

      formIsEdit: false, // form表单是否是编辑状态
      treeData: [],
      tableData: [],
      defaultProps: {
        children: 'children',
        label: 'name'
      },
      currentNodeKey: {},
      formData: {},
      pageParams: {
        agencyId: '', // 当前机构id, 表格TABLE数据需要
        page: 1,
        pageSize: 4
      },
      NodeAreaInfo: {
        address: '',
        province: '',
        county: '',
        city: ''
      }// 当前节点地区信息
    }
  },
  async created() {
    const res = await getTreeOrg()
    this.treeData = JSON.parse(res.data)
    // 树默认选中 初始化对应的table数据
    this.formData = this.treeData[0].children[0].children[1]
    this.NodeAreaInfo = JSON.parse(this.treeData[0].children[0].children[1].address)
    // table表格根据机构获取员工信息
    this.pageParams.agencyId = this.treeData[0].children[0].children[0].id
    this.getEmployeePagingDataAPI(this.pageParams)
  },

  methods: {
    async getEmployeePagingDataAPI(params) {
      // 根据机构ID获取员工信息
      const { data } = await getEmployeePagingDataAPI(params)
      // console.log(data)
      this.tableData = data.items
      this.tableData.forEach((item, index) => {
        item.index = index + 1
        // console.log(item)
      })
      // 分页器相关
      this.total = +data.counts
    },
    async nodeClick(obj, node, component) {
      // address json解析
      this.formData = obj
      this.NodeAreaInfo = JSON.parse(obj.address)
      this.pageParams.agencyId = obj.id
      this.formIsEdit = false
      this.getEmployeePagingDataAPI(this.pageParams)
      await this.$nextTick()
      this.buttonStyle = {
        backgroundColor: '#e15536',
        color: 'white'
      }
    },
    editBtn() {
      this.formIsEdit = true
      this.buttonStyle = {
        backgroundColor: '#ffab98',
        color: 'white'
      }
    },
    handleSizeChange(pageSize) {
      // console.log(pageSize)
      this.pageParams.pageSize = pageSize
      this.getEmployeePagingDataAPI(this.pageParams)
    },
    async handleCurrentChange(page) {
      // console.log(page)
      this.pageParams.page = page
      this.pageParams.pageSize = 5
      this.getEmployeePagingDataAPI(this.pageParams)
    }

  }
}

</script>

<style lang='scss' scoped>
.main{
  height: 700px;
  display: flex;

  .left{
    width: 200px;
  min-height: 700px;
  background-color:#ffffff;
  margin-right: 20px;
  margin-left: 10px;
  }

  .right{
flex: 1;
  margin-right: 20px;
  height: 600px;

  .right-top{
  height: 350px;
  background-color:#ffffff;
  }

    .right-footer{
  height: 250px;
  background-color:#ffffff;

  }

  .title{
    height: 40px;
    background-color: #fafafa;
    color: #2a2929;
    font-weight: 700;
    font-size: 16px;
   line-height: 40px;
  }
  }

}

</style>
